<template>
	<div class="codeBox">
		<template v-for="i in list" :key='i.class'>
			<div>
				<span class="fo-SkyBlue">{{i.class}}</span>
				<span class="fo-Gray noSel"> {</span>
			</div>
			<div class="mt2" v-for=" ii in i.cssGroup.split(';')" :key='ii'>
				<div class="fo-Gray noSel txt-ind-2em">{{ii}}</div>
			</div>
			<span class="fo-Gray noSel block">}</span>
		</template>
	</div>
</template>

<script>
	export default {
		props: {
			list:{
				type:[Array,Object],
				default:function(){
					return []
				}
			},
		}
	}
</script>

<style lang="less" scoped="scoped">
	.codeBox {
		padding:10px 20px;
		width: 1000px;
		max-height: 300px;
		overflow: scroll;
		border-radius: 10px;
		font-size: 14px;
		background: #2B2B2B;
	
		&::-webkit-scrollbar {
			width: 0px;
		}
	
		&::-webkit-scrollbar-thumb {
			background: skyblue;
			border-radius: 20px;
		}
	}
</style>
